
// 添加类型判断
import React from 'react'
import ReactDOM from 'react-dom'

import PropTypes from 'prop-types'

const App = (props) => {
    const arr = props.colors
    const list = arr.map((item, index) => <li key={index}>{item}</li>)
    return (
        <div>
            <ul>{list}</ul>
            设置的默认props值是：{props.pageSize}
        </div>
    )
}

// 添加props校检
App.propTypes = {
    colors: PropTypes.array.isRequired,
    a:PropTypes.number,
    filter:PropTypes.shape({
        area:PropTypes.string,
        price:PropTypes.number
    }),
    fn:PropTypes.func.isRequired
}

// 添加props的默认值
App.defaultProps={
    pageSize:10
}

ReactDOM.render(<App colors={['red','pink']} fn={()=>{}}></App>, document.getElementById('root'))